<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=360" /> -->
    <!-- <meta name="viewport" content="width=device-width" />
     -->
    <!-- <meta name="viewport" content="initial-scale=0.5" /> -->
    <!-- <meta name="viewport" content="initial-scale=1" /> -->
    <!-- <meta name="viewport" content="initial-scale=1, width=500" /> -->
    <!-- <meta name="viewport" content="minimum-scale=0.5" />  -->
    <!-- <meta name="viewport" content="maximum-scale=0.5" />  -->
    <!-- <meta name="viewport" content="user-scalable=no" />  -->

    <!-- 360 -->

    <title>viewport控制</title>

    <style>
        #result{
            width: 300px;
            height: 300px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取布局视口的大小
        // console.log('布局视口的大小为: '+ document.documentElement.clientWidth);

        //获取视觉视口的大小
        // console.log('视觉视口的大小为: '+ window.innerWidth);

        //onresize
        setInterval(() => {
            let str = '布局视口的大小为: '+ document.documentElement.clientWidth;
            str += '<br>视觉视口的大小为: '+ window.visualViewport.width;

            //获取 div
            let result = document.querySelector("#result");
            result.innerHTML = str;
        }, 50);
    </script>
    
</body>
</html>